<script setup>
import { useAppStore } from '../stores/appStore'
import { storeToRefs } from 'pinia'
const store = useAppStore()
const { applications } = storeToRefs(store)

defineProps({
  showLogo: {
    type: Boolean,
    default: false
  }
})

defineEmits(['create-app'])
</script>

<template>
  <div class="app-list">
    <div class="header flex items-center justify-between mb-4">
      <div class="flex items-center">
        <img v-if="showLogo" src="/logo.svg" alt="Logo" class="app-logo" />
        <h2 class="text-xl font-bold text-gray-800">应用列表</h2>
      </div>
      <el-button type="primary" @click="$emit('create-app')">新建应用</el-button>
    </div>
    <div class="menu-wrapper">
      <el-menu>
        <el-menu-item v-for="app in applications" :key="app.id"
          :index="app.id"
          @click="store.setActiveApp(app.id)"
          :title="app.name"
        >
          <span class="menu-item-text">{{ app.name }}</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<style scoped>
.app-list {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
  background-color: #ffffff;
  flex-shrink: 0;
}

.app-logo {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.menu-wrapper {
  flex: 1;
  overflow-y: auto;
}

/* 自定义滚动条样式 */
.menu-wrapper::-webkit-scrollbar {
  width: 6px;
}

.menu-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.menu-wrapper::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.menu-wrapper::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.header h3 {
  margin: 0;
  position: relative;
  padding-left: 12px;
}

.header h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #409eff;
  border-radius: 2px;
}

.app-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.3s;
}

.app-item:hover {
  background: #ebf5ff;
}

/* 修改现有的 el-menu-item 样式 */
:deep(.el-menu-item) {
  padding-right: 20px; /* 确保有足够空间显示文本 */
}

/* 为 el-menu-item 内的文本添加样式 */
:deep(.el-menu-item span) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; /* 确保宽度占满 */
  display: inline-block; /* 改为 inline-block 以支持文本溢出属性 */
}

.menu-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: block;
}

</style>
